<template>
	<view class="content">
		<u-navbar :is-back="false" :is-fixed="true" :title="currVideo.title" title-color="#FFFFFF" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<image src="../../static/back_icon.png" mode="" @click="back"></image>
			</view>
		</u-navbar>
		<video class="video" id="myVideo" :src="currVideo.videoUrl" autoplay controls @play="isVideoEnded=false" @ended="videoEnded" @timeupdate="timeupdate" @controlstoggle="ontrolstoggle" @fullscreenchange="fullscreenchange"></video>
		<cover-view class="videoTool" v-if="isVideoEnded" :class="{videoToolFullscreen : isFullscreen}" :style="{width:isFullscreen?windowHeight:windowWidth}" >
			<cover-image class="preImg" src="../../static/video/video-pre-icon.png" mode="widthFix" @click="preAciton"></cover-image>
			<cover-image class="replayImg" src="../../static/video/video-replay-icon.png" mode="widthFix" @click="rePlayAciton"></cover-image>
			<cover-image class="nextImg" src="../../static/video/video-next-icon.png" mode="widthFix" @click="nextAciton"></cover-image>
		</cover-view>
		<cover-view class="videoSeek" :class="{videoSeekFullscreen : isFullscreen}"   v-if="isShowSeek&&currVideoIndex==3">
			<!-- <scroll-view class="scroll-view_H" scroll-x="true"> -->
				<cover-view class="scroll-view-item_H"  v-for="(item,index) in videoTitles" :key="index" :class="{selected : index==currVideoTitleindex}" @click="titleSelected(index,item)">{{item.title}}</cover-view>
			<!-- </scroll-view>					 -->
		</cover-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',			
				background: {
					backgroundColor: 'clear',
				},
				type:'',
				isVideoEnded: false,
				isShowSeek: false,
				isFullscreen: false,
				videos:[
					{
						title:'柔性开发以需定产',
						videoUrl:'https://dm.static.elab-plus.com/csc20201001/rxkf.mp4'
					},
					{
						title:'数字化客研',
						videoUrl:'https://dm.static.elab-plus.com/csc20201001/szky-video.mp4'
					},
					{
						title:'预定制开发',
						videoUrl:'https://dm.static.elab-plus.com/csc20201001/ydz-video.m4v'
					},
					{
						title:'成功案例',
						videoUrl:'https://dm.static.elab-plus.com/csc20201001/cgal.mp4'
					},
					{
						title:'CEO寄语',
						videoUrl:''
					}
				],
				videoTitles:[
					{time:1,title:"0.01天空森林城市系列"},
					{time:156,title:"2:36 城市智能绿居系列"},
					{time:396,title:"6:36 WII系列"},
					{time:680,title:"11:20 健康人居系列"},
				],
				currVideoTitleindex: 0,
				currVideoIndex: 0,
				currVideo:{
					title:'',
					videoUrl:''
				},
				windowWidth:'0px',
				windowHeight:'0px'
			}
		},
		watch: {
			currVideoIndex(newValue, oldValue) {
				this.currVideo = this.videos[newValue];
				this.isVideoEnded = false;
			}
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('myVideo')
			const { platform } = uni.getSystemInfoSync();
			console.log("platform:", platform);
			if(platform=='ios' || platform=='android'){
				this.videoContext.requestFullScreen()
			}
		},
		onLoad(options) {
			this.type = options.type;
			if(this.type=='rxkf'){
				this.currVideoIndex = 0;
			}else if(this.type=='szky'){
				this.currVideoIndex = 1;
			}else if(this.type=='ydkf'){
				this.currVideoIndex = 2;
			}else if(this.type=='cgal'){
				this.currVideoIndex = 3;
			}else if(this.type=='ceojy'){
				this.currVideoIndex = 4;
			}
			this.currVideo = this.videos[this.currVideoIndex];
			var _that = this;
			uni.getSystemInfo({
			    success: function (res) {
			        _that.windowWidth = res.windowWidth+'px';
					_that.windowHeight = res.windowHeight+'px';
			    }
			});
			// //#ifdef MP-WEIXIN
			//     wx.startDeviceMotionListening({
			//       success: function (e) {
			//         console.log("xxxxxx", e);
			//       }
			//     })
			// 	var that = this;
			// 	 // alpha  number  当 手机坐标 X / Y 和 地球 X / Y 重合时，绕着 Z 轴转动的夹角为 alpha，范围值为[0, 2 * PI) 。逆时针转动为正。
			// 	wx.onDeviceMotionChange(function (res) {
			// 	  var alpha = parseFloat(res.alpha);
			// 	  if (alpha > 45 && alpha < 136) {
			// 		console.log("左侧");
			// 		if(this.isFullscreen){
			// 			that.videoContext.requestFullScreen()
			// 		}
			// 	  } else if (alpha > 225 && alpha < 316) {
			// 	  } else if (alpha > 135 && alpha < 226) {
			// 	  } else {
			// 		console.log("正面");
			// 		if(!this.isFullscreen){
			// 			that.videoContext.exitFullScreen()
			// 		}
			// 	  }
			// 	})
			// //#endif
			
		},
		// onUnload(){
		// 	//#ifdef MP-WEIXIN
		// 	wx.stopDeviceMotionListening({
		// 		success: function (e) {
		// 		  console.log(e);
		// 		},
		// 		fail(e) {
		// 		  console.log(e);
		// 		}
		// 	})
		// 	//#endif
		// },
		methods: {
			back(){
				this.customNavBack();
			},
			videoEnded(){
				this.isVideoEnded = true;
			},
			preAciton(){
				this.currVideoIndex = this.currVideoIndex==0?3:this.currVideoIndex-1;
			},
			rePlayAciton(){
				this.videoContext.play() // 重播
				this.isVideoEnded = false;
			},
			nextAciton(){
				this.currVideoIndex = this.currVideoIndex>=3?0:this.currVideoIndex+1;
			},
			timeupdate(e){
				const currentTime = e.detail.currentTime;
				if(this.currVideoTitleindex<3){
					const time = this.videoTitles[this.currVideoTitleindex].time;
					const nextTime = this.videoTitles[this.currVideoTitleindex+1].time;
					if(currentTime>=nextTime){
						this.currVideoTitleindex += 1;
					}
				}
				
			},
			ontrolstoggle(e){
				this.isShowSeek = e.detail.show;
			},
			titleSelected(index, item){
				this.currVideoTitleindex = index;
				this.videoContext.seek(item.time);
			},
			fullscreenchange(e){
				this.isFullscreen = e.detail.fullScreen
			}
		},
		onShareAppMessage(res) {
			return {
				title: "Elab柔性开发以需定产",
				path: '',
				imageUrl: `https://dm.static.elab-plus.com/csc20201001/${this.type}-share.png`
			}	
		},
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	.content {
		width: 750rpx;
		height: 100%;
		background: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		.video {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
		}
		.videoTool {
			width: 750rpx;
			height: 80vh;
			background: rgba(28,28,28,0.38);
			z-index: 9999;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			.preImg {
				width: 104rpx;
				height: 56rpx;
			}
			.replayImg {
				width: 80rpx;
				height: 80rpx;
			}
			.nextImg {
				width: 104rpx;
				height: 56rpx;
			}
			
		}
		.videoToolFullscreen {
			position: absolute;
			left: 0rpx;
			bottom: 200rpx;
			height: 50vh;
			padding: 100rpx 200rpx;
			box-sizing: border-box;
			background: rgba(28,28,28,0);
		}   
		.videoSeek {
			position: absolute;
			left: 0rpx;
			bottom: 100rpx;
			width: 750rpx;
			height: 60rpx;
			z-index: 9999;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			text-align: center;
			white-space: nowrap;
			overflow-x: scroll;
			overflow-y: hidden;
			display: -webkit-box;
			overflow-x: scroll;
			-webkit-overflow-scrolling:touch;
			.scroll-view-item_H {
				white-space: nowrap;
				display: inline-block;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: left;
				color: #ffffff;
				margin: 0rpx 10rpx;
			}
			.selected {
				color: #93d0ff;
			}
		}
		.videoSeekFullscreen {
			width: 1500rpx;
			height: 60rpx;
			padding: 0rpx 100rpx;
			bottom: 130rpx;
		}
		.slot-wrap {
			display: flex;
			align-items: center;
			padding: 0 40rpx;
			z-index: 99999;
			image {
				width: 56rpx;
				height: 56rpx;
			}
		}
	}
</style>
